<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>Flotr: Basic Watermark Example</title>
		<link rel="stylesheet" href="style.css" type="text/css" />

		<script type="text/javascript" src="../../flotr/prototype/lib/prototype.js"></script>
		<script type="text/javascript" src="examples.js"></script>
		
		<!--[if IE]>
			<script type="text/javascript" src="../../flotr/prototype/lib/excanvas.js"></script>
			<script type="text/javascript" src="../../flotr/prototype/lib/base64.js"></script>
		<![endif]-->
		<script type="text/javascript" src="../../flotr/prototype/lib/canvas2image.js"></script>
		<script type="text/javascript" src="../../flotr/prototype/lib/canvastext.js"></script>
		<script type="text/javascript" src="../../flotr/prototype/flotr.js"></script>
	</head>
	<body>
		
		<!-- ad -->
		
		<div id="wrapper">
			<h1></h1>
			<div id="container" style="width:600px;height:300px;"></div>
			<h2>Example</h2>
			<p>This example shows a basic Flotr graph with a watermark image.</p>
			<p>Finished? Go to the example <a href="index.html" title="Flotr Example Index Page">index page</a>, play with the <a href="../../playground/index.html" title="Flotr playground">playground</a> or read the <a href="http://www.solutoire.com/flotr/docs/" title="Flotr Documentation Pages">Flotr Documentation Pages</a>.</p>
			<h2>The Code</h2>
			<pre id="code-view"><code class="javascript"></code></pre>
			<div id="footer">Copyright &copy; 2008 Bas Wenneker, <a href="http://www.solutoire.com">solutoire.com</a></div>
		</div>
		
		<!-- ad -->
		
		<script type="text/javascript">
			/**
			 * Wait till dom's finished loading.
			 */
			document.observe('dom:loaded', function () {
			    /**
			     * Fill series d1 and d2.
			     */
			    var d1 = [];
			    for (var i = 0; i < 14; i += 0.5)
			    d1.push([i, Math.sin(i)]);
			
			    var d2 = [
			        [0, 3],
			        [4, 8],
			        [8, 5],
			        [9, 13]
			    ];
			
			    /**
			     * Draw the graph.
			     */
			    var f = Flotr.draw($('container'), [d1, d2], {
			        grid: {
			            /**
			             * The watermark can be added in two ways:
			             */
			            //backgroundImage: 'images/butterfly.jpg'
			            /**
			             * However, if you need positioning and/or transparancy, use:
			             */
			            backgroundImage: {
			                left: 60,
			                src: 'images/butterfly.jpg',
			                alpha: 0.3
			            },
			        }
			    });
			});
		</script>
		
		<!-- analytics -->
	</body>
</html>
